<script>
export default {
  name: 'Sku'
}
</script>
<script setup>
import $API from '@/api/index'

import { ref, onMounted } from 'vue'

onMounted(() => {
  reqSkuList()
})

// 存储skuList数据
const skuTableData = ref([])
// 请求sku数据
const reqSkuList = async function (page = 1) {
  const result = await $API.product.sku.reqSkuList(page, limit.value)
  if (result?.data?.code === 200) {
    skuTableData.value = result.data.data.records
    total.value = result.data.data.total

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 请求更新sku上下架
const reqUpdateSale = async function (row) {
  let result
  // 查看当前上架状态，执行对应请求
  // 0: 商品为下架状态   1: 商品为上架状态
  if (row.isSale === 0) {
    result = await $API.product.sku.reqOnSale(row.id)
  } else {
    result = await $API.product.sku.reqCancelSale(row.id)
  }

  if (result?.data?.code === 200) {
    reqSkuList()

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 存储指定skuInfo数据
const skuInfoData = ref({})
// skuInfo抽屉判定
const skuInfoDrawer = ref(false)
// 查看指定sku详情
const getSkuInfo = async function (row) {
  let result = await $API.product.sku.reqGetSkuInfo(row.id)
  if (result?.data?.code === 200) {
    Object.assign(skuInfoData.value, result.data.data)
    console.log(skuInfoData.value)
    skuInfoDrawer.value = true

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}
// 关闭sku详情
const closeSkuInfo = function () {
  skuInfoData.value = {}
}

// 请求删除sku
const reqDeleteSku = async function (row) {
  let result = await $API.product.sku.reqDeleteSku(row.id)

  if (result?.data?.code === 200) {
    reqSkuList(page.value)
    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 分页器
// 当前页码
const page = ref(1)
// 每页条数
const limit = ref(10)
// 总条数
const total = ref(0)
// 没有条数变化后的回调函数
const handleSizeChange = function () {
  reqSkuList()
}
// 页码改变后的回调函数
const handleCurrentChange = function () {
  reqSkuList(page.value)
}
</script>

<template>
  <div>
    <el-card>
      <!-- 表格 -->
      <el-table
        :data="skuTableData"
        border
        stripe
      >
        <el-table-column
          type="index"
          width="80"
          label="序号"
          align="center"
        />
        <el-table-column
          prop="skuName"
          label="名称"
          show-overflow-tooltip
          min-width="250"
        />
        <el-table-column
          prop="skuDesc"
          label="描述"
          show-overflow-tooltip
          min-width="250"
        />
        <el-table-column
          label="默认图片"
          min-width="200"
        >
          <template #="{ row }">
            <img
              class="width150px height150px"
              :src="row.skuDefaultImg"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量(g)"
          min-width="200"
        />
        <el-table-column
          prop="price"
          label="价格(元)"
          min-width="200"
        />
        <el-table-column
          label="操作"
          width="300px"
          fixed="right"
        >
          <template #="{ row }">
            <el-button
              v-if="!row.isSale"
              type="danger"
              icon="Top"
              @click="reqUpdateSale(row)"
              v-has="'btn.Sku.updown'"
            />
            <el-button
              v-else
              type="info"
              icon="Bottom"
              @click="reqUpdateSale(row)"
              v-has="'btn.Sku.updown'"
            />
            <el-button
              type="info"
              icon="InfoFilled"
              @click="getSkuInfo(row)"
              v-has="'btn.Sku.detail'"
            />
            <el-popconfirm
              :title="`你确定要删除 ${row.skuName} 吗？`"
              width="350"
              @confirm="reqDeleteSku(row)"
            >
              <template #reference>
                <el-button
                  type="warning"
                  icon="Delete"
                  v-has="'btn.Sku.remove'"
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        class="marginTop20px"
        v-model:current-page="page"
        v-model:page-size="limit"
        :page-sizes="[10, 15, 20, 25]"
        :total="total"
        layout="prev, pager, next, jumper, ->, sizes, total,"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- sku详情抽屉 -->
    <el-drawer
      v-model="skuInfoDrawer"
      title="查看商品详情"
      direction="rtl"
      size="50%"
      @close="closeSkuInfo()"
    >
      <el-row>
        <el-col
          :span="5"
          :offset="0"
        >
          名字
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          {{ skuInfoData.skuName }}
        </el-col>
        <el-col
          :span="5"
          :offset="0"
        >
          描述
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          {{ skuInfoData.skuDesc }}
        </el-col>
        <el-col
          :span="5"
          :offset="0"
        >
          价格
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          {{ skuInfoData.price }}
        </el-col>
        <el-col
          :span="5"
          :offset="0"
        >
          平台属性
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          <el-tag
            type="danger"
            class="marginRight20px"
            v-for="(item, index) in skuInfoData.skuAttrValueList"
            :key="index"
          >
            {{ item.valueName }}
          </el-tag>
        </el-col>

        <el-col
          :span="5"
          :offset="0"
        >
          销售属性
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          <el-tag
            type="primary"
            class="marginRight20px"
            v-for="(item, index) in skuInfoData.skuSaleAttrValueList"
            :key="index"
          >
            {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
        <el-col
          :span="5"
          :offset="0"
        >
          商品图片
        </el-col>
        <el-col
          :span="19"
          :offset="0"
        >
          <el-carousel
            :interval="4000"
            type="card"
            height="400px"
          >
            <el-carousel-item
              v-for="item in skuInfoData.skuImageList"
              :key="item"
            >
              <img
                style="height: 100%"
                :src="item.imgUrl"
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
